html {
    overflow: hidden;
}

body {
    height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

html,
body {
    touch-action: manipulation;
}

* {
    margin: 0;
    padding: 0;
}

label {
    font-weight: 700;
}

html {
    height: 100%;
    box-sizing: border-box;
}

#app {
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.no-padding {
    padding: 0px !important;
}

.padding-content {
    padding: 4px 0;
}

a:focus,
a:active {
    outline: none;
}

a,
a:focus,
a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

div:focus {
    outline: none;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

.public_container {
    width: 100%;
    height: 100%;
    position: relative;
}
.ku_text_danger{color: #e4393c;}
.ku_text_primary{color: #19aa86;}
.ku_title {
    font-weight: bold;
    font-size: 19px;
    color: #212121;
}

.ku_sub_title_gray {
    font-size: 15px;
    color: #666666;
}

.ku_sub_title {
    font-size: 15px;
    color: #212121;
}

.ku_margin_top_15 {
    margin-top: 15px;
}

.ku_margin_right_8 {
    margin-right: 8px;
}

.ku_margin_bottom_6 {
    margin-bottom: 6px;
}

.ku_margin_bottom_15 {
    margin-bottom: 15px;
}

.ku_margin_left_40 {
    margin-left: 40px;
}

.ku_margin_left_50 {
    margin-left: 50px;
}

// 分割线竖子
.ku_vertical_division {
    display: inline-block;
    width: 1px;
    height: 13px;
    background-color: #A6A9C5;
    margin-left: 8px;
    margin-right: 8px;
    position: relative;
    top: 1px;
}

// 地图显示区域
.ku_map_container {
    width: 100%;
    height: 100%;
}

.ku_router_popup {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0 15px 15px 15px;
    position: absolute;
    z-index: 5;
    top: 46px;
    background-color: #FFFFFF;

}

.ku_widht {
    display: inline;
    width: 100%;
}

.ku_button_list_inline {
    display: flex;
    gap: 15px;

    .ku_button {
        display: inline;
    }
}

.ku_button {
    padding: 10px 20px;
    display: block;
    overflow: hidden;
    text-align: center;
    color: #212121;
    font-size: 14px;
    background-color: #F4F4F4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;

    &.active {
        background-color: #E6ECFF;
        color: #4251DF;
    }
}

.ku_button_primary {
    display: inline-block;
    color: #FFFFFF;
    background: linear-gradient(90deg, #313FB7 0%, #525AC4 100%);
    border: 1px solid rgba(66, 81, 223, 1);
    border-radius: 8px;
    justify-content: center;
    align-items: center;

}

.ku_button_plain_primary {
    padding: 6px 20px;
    display: inline-block;
    font-size: 14px;
    color: rgba(33, 33, 33, 1);
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid rgba(66, 81, 223, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .ku_icon_active {
        display: inline-block;
        width: 19px;
        height: 19px;
        background-image: url('@/assets/images/gis/gis_icon_active.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    &.active {
        color: rgba(66, 81, 223, 1);
        background-color: rgba(217, 220, 249, 1);

    }
}

.ku_button_large {
    padding: 10px 20px;
}

.ku_button_small {
    padding: 6px 20px;
}

.ku_button_list {
    padding-top: 15px;
    display: flex;
    gap: 14px;
    // justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-height: 300px;
    /* 根据需要设置高度 */
    overflow-y: auto;

    /* 添加垂直滚动条 */
    .ku_button_item {
        display: flex;
        flex: 1 0 16.66%;
        overflow: hidden;

        .ku_button {
            display: block;
            width: 100%;
            overflow: hidden;
        }

        &:nth-last-child(1),
        &:nth-last-child(2),
        &:nth-last-child(3),
        &:nth-last-child(4) {
            display: flex;
            flex: 0 1 18.88%;
        }
    }

}


.ku_arrow_plain_list {
    display: flex;
    align-items: center;
    padding: 0 15px 10px 15px;
}

.ku_arrow_plain_primary_button {
    display: inline-block;
    background: rgba(66, 81, 223, 0.2);
    border-radius: 2px;
    border: 1px solid #4251DF;
    font-weight: 500;
    font-size: 14px;
    color: #212121;
    padding: 4px 10px;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #4251DF;
    }
}


.ku_select_date {
    position: relative;

    i {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;
        border-top: 10px solid #AEAEAE;
    }
}

// 运行情况
.ku_operation_status_container {
    position: absolute;
    top: 55px;
    left: 25px;
    display: flex;

    .ku_operation_status_wrap {
        margin-left: 30px;
        padding: 0px 15px 0px 15px;
        display: flex;
        flex: 1 0 auto;
        gap: 48px;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);

        .ku_operation_status_item {
            color: #212121;
            font-size: 14px;
            display: flex;
            flex: 1 0 auto;
            gap: 8px;
            justify-content: center;
            align-items: center;

            .ku_operation_number {
                font-weight: bold;
            }

        }
    }
}

// 竖向列表
.ku_vertical_content {
    position: fixed;
    top: 48px;
    left: 0px;

    .ku_vertical_container {
        top: 0px;
        left: 0px;
        padding: 0 15px;
        width: max-content;

        .ku_vertical_list {
            height: calc(100vh - 48px);
            overflow-y: auto;
        }
    }

    .ku_vertical_select_two {
        position: absolute;
        right: 0%;
        top: 0px;
        left: auto;
        transform: translateX(100%);
        border-left: 1px solid #D9D9D9;
    }
}

.ku_realtime_bus_list {
    position: absolute;
    top: -10px;
    left: -25px;
    z-index: 3;
}

.ku_vertical_container {
    background-color: #FFFFFF;
    min-width: 110px;
    text-align: center;

    .ku_vertical_list {
        height: calc(100vh - 150px);
        overflow-y: auto;

        &::-webkit-scrollbar {
            scrollbar-width: none;
            display: none;
            width: 0;
        }
    }

    .ku_vertical_item {
        font-size: 15px;
        color: #212121;
        padding: 15px;
        border-bottom: 1px solid #D9D9D9;

        &.active {
            color: #4251DF;
            font-weight: bold;
        }
    }
}


// gis 右侧更多操作
.ku_gis_right_more_operations {
    position: fixed;
    top: 67.2px;
    right: 15px;
}

.ku_rigth_popup {
    box-shadow: 0px 4px 10px 0px rgba(0, 5, 55, 0.1);
}

.ku_left_popup {
    box-shadow: 0px 4px 10px 0px rgba(0, 5, 55, 0.1);
}

// 车辆详情右侧弹出框
.ku_rigth_popup_container {
    position: relative;
    width: 304px;
    height: 100%;
    background: #FFFFFF;

    border-radius: 16px 0px 0px 16px;

    .ku_rigth_popup_head {
        font-size: 17px;
        font-weight: bold;
        padding: 15px;
    }

    .ku_rigth_popup_footer {
        position: absolute;
        bottom: 15px;
        left: 0px;
        width: 100%;
        padding: 0px 20px;
        display: flex;
        gap: 10px;
        align-items: center;
    }
}

.ku_rigth_popup_body {
    margin-top: 10px;

    .ku_rigth_popup_body_top {
        width: 100%;
        height: 68px;
        padding: 22px 15px 0px 15px;
        background: linear-gradient(180deg, rgba(66, 81, 223, 0.36) 0%, rgba(255, 255, 255, 0.6) 100%);
        border-radius: 8px 8px 0px 0px;

        .ku_rigth_popup_body_top_title {
            position: relative;
            padding: 7px;
            background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.1) 100%);
            border-radius: 2px;

            .ku_rigth_popup_body_top_badge {
                display: inline-block;
                background: linear-gradient(13deg, #D43B47 0%, #F75934 100%);
                border-radius: 3px 3px 3px 0px;
                font-size: 12px;
                color: #FFFFFF;
                padding: 0px 10px;
                position: absolute;
                top: -10px;
                left: -2px;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -4px;
                    left: 0px;
                    width: 0;
                    height: 0;
                    border-left: 3px solid transparent;
                    border-right: 0px solid transparent;
                    border-top: 4px solid #D43B47;
                }
            }
        }
    }

    .ku_rigth_popup_driver_info {
        padding: 0 15px;
        display: flex;
        gap: 10px;
        align-items: center;
        color: #212121;
        font-size: 16;
        font-weight: 500;
    }

    .ku_rigth_popup_bus_info {
        margin-top: 23px;
        padding: 0 15px;
        max-height: calc(100vh - 300px);
        overflow-y: auto;

        .ku_rigth_popup_bus_info_item {
            display: flex;
            justify-content: space-between;
            width: 100%;
            background-color: #F7F7F7;
            padding: 10px 15px;
            border-radius: 1px;
            margin-bottom: 5px;
        }
    }
}

// 头部信息区域
.ku_header_container {
    position: fixed;
    z-index: 4;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);

    .ku_header_content {
        height: 100%;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        padding: 0px 15px;
        font-family: PingFang SC;
        font-size: 15px;
        color: #212121;

        .ku_header_select_arrow {
            display: inline-block;
            width: 22px;
            height: 22px;
            background: rgba(66, 81, 223, 0.2);
            border-radius: 50%;
            line-height: 22px;
            text-align: center;
        }
    }

}

// 轨迹回放图例
.ku_history_track_legend {
    position: fixed;
    bottom: 80px;
    right: 15px;
    padding: 9px 16px;
    background-color: #FFFFFF;
    border-radius: 4px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #212121;

    i {
        display: inline-block;
        width: 15px;
        height: 5px;
        margin-right: 8px;
        background: rgba(66, 81, 223, 0.7);
        position: relative;
        top: -2px;

        &.active {
            background: rgba(34, 183, 34, 1);
        }
    }
}

.ku_history_track_play_progress {
    position: fixed;
    bottom: 8px;
    width: 100%;
    height: 56px;
    padding: 0 15px;

    .ku_history_track_play_progress_content {
        padding: 12px 15px;
        height: 100%;
        background: #FFFFFF;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        display: flex;
        gap: 8px;
        justify-content: start;
        align-items: center;

        // 进度条
        .ku_history_track_play_slider {
            padding: 0px 20px;
            display: flex;
            width: calc(100% - 80px);
            font-weight: 500;
            font-size: 12px;
            color: #212121;

            .ku_history_track_slider {
                position: relative;
                top: 7px;
                margin: 0px 12px;
            }

            // 进度按钮
            .ku_history_track_play_slider_button {
                position: relative;
                top: 3px;
            }
        }

        // 倍速
        .ku_history_track_speed {
            position: relative;
            text-align: center;
            font-weight: 500;
            font-size: 14px;
            color: #212121;

            .ku_history_track_speed_list {
                position: absolute;
                bottom: 56px;
                right: -20px;
                border-radius: 4px;
            }
        }
    }
}

// 垂直列表
.ku_vertical_list_sector {
    background-color: #FFFFFF;
    text-align: center;
    padding: 0 15px;

    .ku_vertical_list {
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
            scrollbar-width: none;
            display: none;
            width: 0;
        }
    }

    .ku_vertical_item {
        font-size: 15px;
        color: #212121;
        padding: 15px;
        border-bottom: 1px solid #D9D9D9;
        min-width: 85px;

        &.active {
            color: #4251DF;
            font-weight: bold;
        }
    }

    :last-child {
        border-bottom: 1px solid transparent;
    }
}


.ku_table_body {
    padding: 0px 15px 15px 15px;
    width: 100%;
    height: calc(100vh - 15px);
    overflow: auto;
    /* 允许滚动 */
    scrollbar-width: none;

    /* Firefox隐藏滚动条 */
    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        /* 自动分配列宽 */

        thead {
            position: sticky;
            /* 固定表头 */
            top: -1px;
            /* 顶部位置 */
            background-color: #fff;
            /* 背景颜色 */
            z-index: 10;

            /* 使表头在其他内容之上 */
            th {
                background: rgba(0, 0, 0, 0.08);
            }
        }

        tbody {

            /* 隔行变色 */
            tr:nth-child(even) {
                background-color: #f2f2f2;
                /* 偶数行颜色 */
            }

            tr:nth-child(odd) {
                background-color: #ffffff;
                /* 奇数行颜色 */
            }
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
    }

    &::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge隐藏滚动条 */
    }
}

.ku_table_content {
    width: 100%;
    height: 100vh;
    background-color: rgba(204,217,254,1);
    overflow: auto;
    /* 允许滚动 */
    scrollbar-width: none;

    /* Firefox隐藏滚动条 */
    table {
        min-width: 100%;
        padding: 0px 14px 0px 14px;
        border-collapse: separate;
        table-layout: auto;
        border-spacing: 0 6px;
        font-size: 14px;

        thead {
            position: sticky;
            /* 固定表头 */
            top: -1px;
            /* 背景颜色 */
            z-index: 10;
            background: rgba(66, 81, 223, 0.2);
            border-radius: 8px;
            /* 使表头在其他内容之上 */
            th {
                font-weight: 400;
                padding: 8px 0 8px 0;
                text-align: right;


                &:first-child {
                    padding-left: 20px;
                    text-align: left;
                    border-radius: 8px 0 0 8px;
                    border-left: 1px solid transparent;

                }

                &:last-child {
                    padding-right: 20px;
                    border-radius: 0 8px 8px 0;
                    border-right: 1px solid transparent;
                }
            }
        }

        .ku_table_scroll {
            background: linear-gradient(0deg, #313FB7 0%, #525AC4 100%);
            color: #ffffff;
        }

        tbody {
            position: relative;
            z-index: 9;

            tr {
                overflow: hidden;
                /* 确保圆角效果 */
                background: linear-gradient(90deg, rgba(66, 81, 223, 0.3) 0%, #ffffff 16%);

                td {
                    padding: 8px 0 8px 0;
                    text-align: right;
                    overflow: hidden;
                    border-top: 1px solid #FFFFFF;
                    border-bottom: 1px solid #FFFFFF;

                    &:first-child {
                        font-weight: bold;
                        text-align: left;
                        padding-left: 20px;
                        border-radius: 8px 0 0 8px;
                        border-left: 1px solid #FFFFFF;
                    }

                    &:last-child {
                        padding-right: 20px;
                        border-radius: 0 8px 8px 0;
                        border-right: 1px solid #FFFFFF;
                    }
                }
                

            }
        }
    }


    &::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge隐藏滚动条 */
    }
}